
// 添加这个自调用函数,可以放置变量的污染
(function () {
  // 初始化
  var myChartsale = echarts.init($('.line').get(0))
  console.log(myChartsale)
  var option

  var data = {
    year: [
      [24, 40, 101, 134, 90, 230, 210, 230, 120, 230, 210, 120],
      [40, 64, 191, 324, 290, 330, 310, 213, 180, 200, 180, 79]
    ],
    quarter: [
      [23, 75, 12, 97, 21, 67, 98, 21, 43, 64, 76, 38],
      [43, 31, 65, 23, 78, 21, 82, 64, 43, 60, 19, 34]
    ],
    month: [
      [34, 87, 32, 76, 98, 12, 32, 87, 39, 36, 29, 36],
      [56, 43, 98, 21, 56, 87, 43, 12, 43, 54, 12, 98]
    ],
    week: [
      [43, 73, 62, 54, 91, 54, 84, 43, 86, 43, 54, 53],
      [32, 54, 34, 87, 32, 45, 62, 68, 93, 54, 54, 24]
    ]
  }

  option = {
    tooltip: {
      trigger: 'axis'
    },
    legend: {
      right: '5%', // 距离右侧10%
      textStyle: {
        // 图例上的文字颜色
        color: '#4c9bfd' // 浅蓝色
      }
    },
    grid: {
      top: '20%',
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true,
      show: true,
      borderColor: '#012f4a'
    },
    xAxis: {
      type: 'category',
      boundaryGap: false,
      boundaryGap: false, // 坐标轴两边留白策略
      data: [
        '1月',
        '2月',
        '3月',
        '4月',
        '5月',
        '6月',
        '7月',
        '8月',
        '9月',
        '10月',
        '11月',
        '12月'
      ],
      axisTick: {
        // 去掉刻度
        show: false
      },
      axisLabel: {
        // 文字颜色
        color: '#4c9bfd'
      },
      axisLine: {
        // 隐藏轴线
        show: false
      }
    },
    yAxis: {
      type: 'value',
      axisLabel: {
        //文字颜色
        color: '#4c9bfd'
      },
      axisTick: {
        //去掉刻度
        show: false
      },
      splitLine: {
        // 坐标轴在图标里分割线
        lineStyle: {
          color: '#012f4a'
        }
      }
    },
    series: [
      {
        name: '预期销售额',
        itemStyle: {
          color: '#00f2f1' // 线颜色
        },
        type: 'line',
        smooth: true, // 是否平滑曲线显示
        data: data.year[0]
      },
      {
        name: '实际销售额',
        itemStyle: {
          color: '#ed3f35' // 线颜色
        },
        type: 'line',
        smooth: true, // 是否平滑曲线显示
        data: data.year[1]
      }
    ]
  }

  myChartsale.setOption(option)

  // 点击切换
  // 绑定点击事件(切换样式,切换图表数据)
  var index = 0;
  // 规定只有是.sale 下面的.caption 下面的a标签才可以触发这个点击事件
  $('.sales').on('click', '.caption a', function () {
    $(this).addClass('active').siblings().removeClass('active')
    // 修改数据
    var currData = data[$(this).attr('data-type')]
    // currData 是数组  第一项 是第一条线的数据  第二项 是是第二条线的数据
    option.series[0].data = currData[0]
    option.series[1].data = currData[1]
    // 重新渲染
    myChartsale.setOption(option)
    index = $(this).index() - 1 // 因为上面有个h3
  })

  // 自动切换  开启定时器
  var $allA = $('.sales .caption a')
  var t
  function createTimer () {
    // 这里的整体的思路就是根据下角标,找打这个对应的标签,然后给他绑定点击事件
    t = setInterval(function () {
      index++
      if (index >= 4) {
        index = 0
      }
      //切换上面的文字按钮
      $allA.eq(index).click()
    }, 2000)
  }
  createTimer();
  //移入停止计时,移除继续
  // 当鼠标移动到一个匹配的元素上面时，会触发指定的第一个函数。
  // 当鼠标移出这个元素时，会触发指定的第二个函数
  $('.sales').hover(
    () => {
      clearInterval(t)
    },
    () => {
      createTimer()
    }
  )
})()
